<template>
    标签状态
    <el-switch :loading="tagStatusLoading" v-model="tagStatus"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;margin: 0 10px 0 5px" :active-value=1
        :inactive-value=0 @change="searchTagList" />
    根标签
    <el-select :loading="tagLevel1ListLoading" v-model="selectTagList" multiple collapse-tags collapse-tags-tooltip
        placeholder="请选择根标签" style="width: 240px;margin: 0 10px 0 5px">
        <el-option v-for="tag in tagLevel1List" :key="tag.courseTagId" :label="tag.courseTagName"
            :value="tag.courseTagId" />
    </el-select>
    标签名称
    <el-input v-model="searchTagName" class="w-50 m-2" placeholder="请输入标签名称" style="width:250px;margin: 0 10px 0 5px" />
    <el-button @click="searchTagList" :loading="searchTagNameLoading" style="margin: 0 5px">搜索</el-button>

    <el-button type="primary" :loading="statusLoading" auto-insert-space @click="createTag = true"
        style="margin: 0 5px">添加标签
    </el-button>
    <el-table v-loading="courseTagListLoading" :data="courseTagList" style="width: 100%;margin: 20px 0;"
        row-key="courseTagId" border lazy :tree-props="{ children: 'tagList' }">
        <el-table-column prop="courseTagName" label="标签名" sortable />
        <el-table-column label="标签状态">
            <template #default="scope">
                <el-switch v-model="scope.row.courseTagStatus"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value=1
                    :inactive-value=0 :before-change="beforeChange"
                    @change="onchange(scope.row.courseTagId, scope.row.courseTagStatus)" />
            </template>
        </el-table-column>
        <el-table-column width="135" align="center" label="操作" fixed="right">
            <template #default="scope">
                <el-button size="small" @click="detail(scope.row.courseTagId)" type="primary">详情
                </el-button>
                <el-popconfirm title="确认是否删除?" confirmButtonText="确认" cancelButtonText="取消">
                    <template #reference>
                        <el-button size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" v-model="page.currentPage" :page-count="page.pageCount"
        :page-size="page.pageSize" @current-change="currnetChange" />

    <el-dialog v-model="createTag" @close="reload" title="添 加 标 签">
        <create-course-tag :parentTagList="parentTagList"></create-course-tag>
    </el-dialog>
    <el-dialog v-model="updateTag" @close="reload" title="详 细 信 息">
        <course-tag-detail :parentTagList="parentTagList" :courseTagId="updateTagId"></course-tag-detail>
    </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from '@vue/reactivity';
import CreateCourseTag from './createCourseTag.vue';
import CourseTagDetail from './courseTagDetail.vue';


export default {
    name: "courseTagList",
    components: { CreateCourseTag, CourseTagDetail },
    data() {
        return {
            createTag: ref(false),
            updateTag: ref(false),
            updateTagId: ref(-1),
            tagStatusLoading: ref(false),
            tagStatus: 1,
            selectTagList: ref([]),
            searchTagNameLoading: ref(false),
            searchTagName: "",
            statusLoading: ref(false),
            tagLevel1ListLoading: ref(false),
            tagLevel1List: [],
            courseTagListLoading: ref(false),
            courseTagList: [],
            page: {
                currentPage: 1,
                pageSize: 5,
                pageCount: 5
            },
            parentTagList: null
        };
    },
    methods: {
        
        
        beforeChange() {
            return new Promise((resolve) => {
                ElMessageBox.confirm('确认修改标签状态吗').then(()=>{
                    return resolve(true)
                }).catch(()=>{
                    return resolve(false)
                })
            })
        },
        onchange(tagId, status) {
            //检查标签id是否为空
            if (null == tagId || tagId < 0) {
                ElMessage.warning('标签id不能为空');
            }
            //检查状态是否规范
            if (null == status || status < 0 || status > 1) {
                ElMessage.warning('标签状态异常');
            } else {
                //开启加载
                this.statusLoading = true;
                let formData = new FormData();
                formData.append('tagId', tagId);
                formData.append('status', status);
                this.axios.put('/api/updateCourseTagStatus', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((response) => {
                    if (response.data.code == 200) {
                        ElMessage.success(response.data.msg);
                        this.reload();
                    }
                    else {
                        ElMessage.warning(response.data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                }).finally(() => {
                    this.statusLoading = false;
                })
            }
        },
        currnetChange(currentPage) {
            this.page.currentPage = currentPage;
            this.searchTagList();
        },
        detail(tagId) {
            this.updateTagId = tagId;
            this.updateTag = true;
        },
        searchTagList() {
            //将开启loading加载
            this.tagStatusLoading = true;
            this.searchTagNameLoading = true;
            this.courseTagListLoading = true;
            //检查标签名称是否为空
            this.axios.get(`/api/selectCourseTagByNameAndStatusAndIdAndPage?currentPage=${this.page.currentPage}&pageSize=${this.page.pageSize}&tagStatus=${this.tagStatus}&tagName=${this.searchTagName}&tagIds=${this.selectTagList}`).then((response) => {
                if (response.data.code == 200) {
                    this.courseTagList = response.data.data.list;
                    this.page.pageCount = response.data.data.pages;
                }
            }).catch(function (error) {
                console.log(error);
            }).finally(() => {
                //关闭loading加载
                this.tagStatusLoading = false;
                this.searchTagNameLoading = false;
                this.courseTagListLoading = false;
            });
        },
        //获取根标签
        getTagLevel1List() {
            //开启加载
            this.tagLevel1ListLoading = true;
            this.axios.get("/api/selectCourseTageLevel1").then(response => {
                if (response.data.code == 200) {
                    this.tagLevel1List = response.data.data;
                }
                else {
                    ElMessage.warning(response.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            }).finally(() => {
                this.tagLevel1ListLoading = false;
            });
        },
        getParentTagList() {
            this.axios.get('/api/selectParentTag').then((response) => {
                if (response.data.code == 200) {
                    this.parentTagList = response.data.data;
                } else {
                    ElMessage.warning(response.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            })
        },
      reload(){
        //调用获取所有标签集合方法
        this.searchTagList();
        //调用获取根标签方法
        this.getTagLevel1List();
        //获取一、二级标签
        this.getParentTagList();
      }
    },
    created() {
        //当页面第一次访问
        this.reload();
    },
    components: { CreateCourseTag, CourseTagDetail }
}
</script>

<style>
</style>